<template>
    <div class="SMS-box">
        <el-input placeholder="账号" v-model="username" class="phone-item"></el-input>
        <label class="warning_txt" v-if="waringShow">{{warning_txt}}</label>
        <el-input placeholder="密码" v-model="password" class="password-item"></el-input>
        <div class="radio-box">
            <input type="checkbox" v-model="agree">我同意用户条款和隐私政策
        </div>
        <label class="warning_txt" v-if="waringShow2">{{warning_txt}}</label>
        <button @click="loginAccount">登录</button>
    </div>
</template>

<script>
import { login } from '@/utils/api/login';

export default {
    data(){
        return {
            username:null,
            password:null,
            warning_txt:null,
            waringShow:false,
            waringShow2:false,
            agree:false
        }
    },
    methods:{
        loginAccount(){
            const that=this
            if(this.agree===false){
                this.warning_txt="请勾选用户条款和隐私政策"
                that.waringShow2=true
                const time=setTimeout(()=>{
                    that.waringShow2=false
                    that.warning_txt=null
                    clearTimeout(time)
                },3000)
            }else{
                login({username:this.username,password:this.password}).then(data=>{
                    localStorage.setItem('user',JSON.stringify(data))
                    that.$store.state.UAPdialogShow=false
                    that.$store.state.islogin=true
                }).catch(err=>{
                    that.warning_txt="密码或者账号错误请重试"
                    that.waringShow=true
                    that.username=null
                    that.password=null
                    const time=setTimeout(() => {
                        that.waringShow=false
                        clearTimeout(time)
                    }, 5000);
                    console.log("登录失败",err)
                })
            }
        }
    }
}
</script>

<style>
.SMS-box{
    width: 90%;
    margin: 0 auto;
}
.phone-item,.password-item{
    margin-top: 20px;
}
.warning_txt{
    font-size: 10px;
    color: red;
    padding-left: 10px;
}
.captcha-box{
    display: flex;
    margin-top: 20px;
}
.captcha-btn{
    border: 1px solid #bbb;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20rpx;
    width: 25%;
}
.radio-box{
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 10px;
}
.SMS-box>button{
    width: 100%;
    background-color: black;
    color: #fff;
    padding: 5px 0;
    font-size: 16px;
    margin: 15px 0;
}
</style>